<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!-- 菜单栏目-->
<epgdata:categoryItem var="menu_cat" size="4" code="${_templateParams['menu_cat']}" />
<!-- 所有内容 -->
<epgdata:bizList var="dbIndex_biz" code="${_templateParams['dbIndex_biz']}"/>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<%@include file="/sites/weixin/js/common.jsp" %>
<%@include file="/sites/weixin/common/common_js.jsp" %>
<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
<body onload="init()">
<div id="app">
	<!-- 上方菜单 -->
	<c:set var="menuIdx" value="2"/>
	<%@include file="topMenu.jsp" %>

	<!-- 所有内容 -->
	<c:forEach var="biz" items="${dbIndex_biz}" varStatus="j">
		<epgdata:bizList var="curBizs" code="${biz.code}"/>
		<div class="row row-empty" style="margin-top:3.5em">
			<div class="col-xs-4 col-db">
				<img class="width-100" src="${_resourcePath}${biz.icon}">
			</div>
		</div>
		<div class="container" >
			<c:forEach var="item" items="${curBizs}" varStatus="i">
				<div class="col-xs-3 col-db-cntnt" id="hotVod_${i.index}" onclick="gotoLink('${item.url}','hot_${i.index}')">
					<img class="lazyImg width-100" src="${_contextPath}/sites/weixin/images/defaultBg_3.jpg" data-original="${_resourcePath}${item.bigIcon}"/>
				</div>
			</c:forEach>
		</div>
		<div class="index-line"></div>
	</c:forEach>
	
</div>
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>	
</body>
<script>
var vm = new Vue({
	el:"#app",
	data:{
		resourcePath:'${_resourcePath}',
		contextPath:'${_contextPath}/sites/weixin'
	},
    mounted: function () {
		this.$nextTick(function () {
			this.lazyLoad();
	 	});
    },
	methods:{
		gotoLink:gotoLink,
		lazyLoad:function(){
			$(document).ready(function(){
				$(".lazyImg").lazyload({ 
			        placeholder : "images/defaultBg_3.jpg", 
			        effect : "fadeIn" 
		   			}); 
			});
		}
	}
});
function init(){
}
</script>
</html>